<template>
  <el-card :body-style="{ padding: '0px', width: '310px'}" shadow="never"
    v-loading="data.disable === 'YES' || data.isPublish === 'REVOKE'"
    element-loading-text=""
    element-loading-spinner="null"
    element-loading-background="rgba(0, 0, 0, 0)"
  >
    <div class="advisory-img-container" >
      <div class="event-over-card" v-show="data.disable === 'YES' || data.isPublish === 'REVOKE'">
        <p class="text-right" v-show="data.disable === 'YES'">已删除</p>
        <p class="text-right" v-show="data.isPublish === 'REVOKE'">活动已撤销</p>
      </div>
      <img :src="getImgUrl(cardinfo.activityLogo, index)" class="image" @click="goDetails">
    </div>
     <div  @click="goDetails">
       <p class="event-desc">{{cardinfo.activityTitle}}</p>
       <div class="bottom clearfix">
         <div class="list-footer-fs" style="display: inline-block;">
           <time class="time">报名截止：{{$formatYMD(cardinfo.signEndTime)}}</time>
           <div class="">
             <span class="el-icon-view"></span>
             <span class=""  style="padding-top: 3px;margin-right: 6px;">{{cardinfo.browseNumber}}</span>
             <span class="el-icon-edit-outline"></span>
             <span class="" >{{cardinfo.comments}}</span>

           </div>
         </div>
          <el-button type="success" class="button fr" size="mini" round @click.stop="signUp">
            <span v-show="cardinfo.signStatus === 'NOT'">修改并提交</span>
            <span v-show="cardinfo.signStatus === 'ALREADY'">查看报名详情</span>
          </el-button>
       </div>
     </div>
   </el-card>
</template>

<script>
  export default {
    title: '活动通用卡片',
    name: 'event-card',
    data () {
      return {
        cardinfo: {
          content: '抢占人工智能行业红利，前阿里巴巴产品专家带 你15天入门AI产品经理,报名开始了啊',
          time: '2018/03/05',
          person: 60,
          look: 2008
        }
      }
    },
    props: {
      data: {},
      index: {}
    },
    mounted () {
      this.cardinfo = Object.assign({}, this.data)
    },
    methods: {
      signUp () {
        this.$router.push({name: 'eventform', params: this.cardinfo})
      },
      goDetails () {
        // this.$router.push({name: 'eventdetails', params: this.cardinfo})
        const {href} = this.$router.resolve({
          name: 'eventdetails',
          // query: this.cardinfo
          query: {
            id: this.cardinfo.activityId, 
            basicType: this.cardinfo.activityType, 
            browseNumber: this.cardinfo.browseNumber, 
            comments: this.cardinfo.comments
          }
        })
        window.open(href, '_blank')
      },
      getImgUrl (url, index) {
        if (url) {
          return url
        }
        let i = index % 3
        if (i === 0) {
          return 'static/morenhuodongtu1.png'
        } else if (i === 1) {
          return 'static/morenhuodongtu2.png'
        } else {
          return 'static/morenhuodongtu3.png'
        }
      }
    }
  }
</script>
<style>
  #events-card-list .el-card {
    border: none;
  }
  .event-desc {
    overflow: hidden;
    height: 40px;
    line-height: 20px;
    color: #414141;
    font-size: 14px;
    margin: 10px 0;
    padding: 0px;
    word-break: break-all;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
     -webkit-line-clamp: 2; /** 显示的行数 **/
  }
  .event-over-card {
    position: absolute;

    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.7);
  }
  .event-over-card p {
    color: red;
    margin: 0;
  }
</style>
